import { Button, Form, message } from 'antd';
import ProForm, {
  ModalForm,
  ProFormText,
  ProFormDigit,
  ProFormRadio,
  ProFormTextArea,
} from '@ant-design/pro-form';
import UploadImage from '@/components/UploadImage';
import type { FormGoodsType } from './data';
import { createGoods } from '@/pages/Goods/service';
import CategorySelect from '@/components/CategorySelect';
const formLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
interface UpdateFormProps {
  setRefreshCount: any;
}
const CreateModalForm = (props: UpdateFormProps) => {
  const { setRefreshCount } = props;
  const [form] = Form.useForm();

  /**
   * 创建节点
   * @param fields
   */
  const handleCreate = async (fields: FormGoodsType) => {
    const hide = message.loading('正在创建');
    try {
      const res = await createGoods({
        ...fields,
      });
      hide();
      if (res.success) {
        form.resetFields();
        setRefreshCount((count: number) => count + 1);
        message.success('创建成功');
      } else {
        message.error('创建失败,请重试');
      }
      return true;
    } catch (error) {
      hide();
      message.error('创建失败,请重试');
      return false;
    }
  };
  return (
    <ModalForm
      form={form}
      layout="horizontal"
      {...formLayout}
      title="添加茶叶"
      modalProps={{
        onCancel: () => form.resetFields(),
      }}
      initialValues={{
        image_url: 'http://rahxw9394.hd-bkt.clouddn.com/Fhj4tLwwVyCblb1K5poVBWchB2fo',
        is_onShelf: 1,
      }}
      trigger={<Button type="primary">添加</Button>}
      onFinish={async () => {
        form
          .validateFields()
          .then((fieldsValue) => {
            handleCreate(fieldsValue);
          })
          .catch(() => {});
        return true;
      }}
    >
      <ProForm.Item
        key="image_url"
        name="image_url"
        label="图片"
        getValueFromEvent={(e) => {
          return e.response.url;
        }}
        rules={[{ required: true, message: '请上传图片' }]}
      >
        <UploadImage forValue="carsoul" />
      </ProForm.Item>
      <ProFormText
        key="title"
        name="title"
        label="茶叶名称"
        placeholder="茶叶名称"
        rules={[{ required: true, message: '请输入茶叶名称', min: 1, max: 12 }]}
        width={256}
      />
      <ProFormText
        key="sub_title"
        name="sub_title"
        label="茶叶副标题"
        placeholder="茶叶副标题"
        rules={[{ required: true, message: '请输入茶叶名称(1~20位)', min: 1, max: 12 }]}
        width={256}
      />
      <ProFormText
        key="desc"
        name="desc"
        label="茶叶描述"
        placeholder="请输入茶叶描述"
        rules={[{ required: true, message: '请输入茶叶描述' }]}
        width={256}
      />
      <ProFormText
        key="birth_place"
        name="birth_place"
        label="茶叶主产地"
        placeholder="请输入茶叶主产地"
        rules={[{ required: true, message: '请输入茶叶主产地' }]}
        width={256}
      />
      <ProFormTextArea
        key="characteristic"
        name="characteristic"
        label="茶叶特色"
        placeholder="请输入茶叶特色"
        rules={[{ required: true, message: '请输入茶叶特色' }]}
        width={256}
      />
      <ProFormDigit
        label="茶叶原价"
        key="original_price"
        name="original_price"
        rules={[{ required: true, message: '请输入茶叶原价' }]}
        width={256}
        min={1}
      />
      <ProFormDigit
        label="茶叶现价"
        key="current_price"
        name="current_price"
        rules={[{ required: true, message: '请输入茶叶现价' }]}
        width={256}
        min={1}
      />

      <ProFormDigit
        label="茶叶库存"
        name="stock"
        rules={[{ required: true, message: '请输入茶叶库存' }]}
        key="stock"
        width={256}
        min={1}
      />
      <ProForm.Item
        key="category_id"
        name="category_id"
        label="茶叶分类"
        rules={[{ required: true, message: '请选择茶叶分类' }]}
      >
        <CategorySelect placeholder=" 请选择茶叶分类" />
      </ProForm.Item>
      <ProFormRadio.Group
        name="is_onShelf"
        key="is_onShelf"
        label="是否上架"
        options={[
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ]}
      />
    </ModalForm>
  );
};
export default CreateModalForm;
